<template>
	<view class="index">
		<view class="mask" v-show="showMask" @click="hide"></view>

		<view class="uni-card">
			<view class="uni-card-header">粮票余额</view>
			<view class="uni-card-content">
				<view class="uni-card-content-inner " style="text-align: center;">
					{{userInfo.totalWealthValue}}
				</view>
			</view>

		</view>


		<view class="m-menu">
			<view class="item" v-for="(item,index) in grids" :key="index" @tap="goTo(index, item.navigatePage)">
				<image :src="item.imageUrl" background-size="cover"></image>
				<text>{{item.text}}</text>
			</view>
		</view>

		<scroll-view id="tab-bar" class="swiper-tab" scroll-x :scroll-left="scrollLeft">
			<block v-for="(tab,index1) in tabs" :key="tab.id">
				<view :class="['swiper-tab-list',currentTab==index1 ? 'on' : '']" :id="tab.id" :data-current="index1" @tap="swichNav">{{tab.typeName}}</view>
			</block>
		</scroll-view>
		<swiper :current="currentTab" class="swiper-box" duration="300" @change="bindChange">
			<block v-for="(tab,index2) in products" :key="index2">
				<swiper-item>
					<scroll-view class="index-bd" scroll-y @scrolltolower="loadMore(index2)">
						<view v-for="(item,index3)  in tab.data" :key="index3">

							<!-- <view class="uni-flex uni-row" style="margin: 10px; padding: 10upx; border-bottom: 1px solid #BBBBBB;">
								<view class="text" style="width: 100upx;height: 100upx;display: flex; justify-content: center;align-items: center; border: #BBBBBB 1px solid;">
									<image :src="item.originalImageUrl" style="width: 150upx;height: 150upx;"></image>
								</view>
								<view class="uni-flex uni-column" style="flex: 1;justify-content: space-between; ">
									<view class="text" style="text-align: left;padding-left: 20upx;padding-top: 10upx;">
										{{item.productName}}
									</view>
									<view class="uni-flex uni-row">
										<view class="text" style="flex: 1; color: #E51C23; text-align: left;" v-if="item.productPrices !== undefined">￥{{item.productPrices[0].price}}</view>
										<view class="text">
											<view style="flex: 1; border: 1px solid #871A8E; color:#871A8E;text-align: center;" @tap="buy(item)" v-if="index2 == 0">立即购买</view>
											<view style="flex: 1; border: 1px solid #871A8E; color:#871A8E;text-align: center;" @tap="buy(item)" v-if="index2 == 1">立即充值</view>
											<view style="flex: 1; border: 1px solid #871A8E; color:#871A8E;text-align: center;" @tap="buyMessageCount(item)" v-if="index2 == 1">立即购买</view>
										</view>

									</view>
								</view>
							</view> -->
							<view class="uni-coupon">
								<view class="uni-coupon-body">
									<view class="uni-coupon-body-price">
										￥{{item.productPrices[0].price}}
									</view>
									<view class="uni-coupon-description">
										{{item.productName}}
									</view>
								</view>
								<view class="uni-coupon-action" @tap="buy(item)" v-if="index2 == 0">立即购买</view>
								<view class="uni-coupon-action" @tap="buy(item)" v-if="index2 == 1">立即充值</view>
								<view class="uni-coupon-action" @tap="buy(item)" v-if="index2 == 2">立即兑换</view>
							</view>
						</view>
						<view style="height: 80px;">

							<load-more :loadingType="tab.loadingType" :contentText="tab.contentText"></load-more>
						</view>

					</scroll-view>
				</swiper-item>
			</block>
		</swiper>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex'
	import {
		getPage
	} from '@/api/mall/product'
	import loadMore from '@/components/load-more.vue'
	import {
		setStore
	} from '@/common/util';
	import {
		appInfo
	} from '@/common/appinfo'

	export default {
		component: {
			loadMore
		},
		data() {
			return {
				grids: [{
						imageUrl: "/static/image/recharge.png",
						text: "充值记录",
						navigatePage: "/pages/my/record",
					},
					{
						imageUrl: "/static/image/VIP.png",
						text: "VIP购买记录",
						navigatePage: "/pages/my/record",
					},
					{
						imageUrl: "/static/image/consumer.png",
						text: "我的消费",
						navigatePage: "/pages/my/record",
					},
				],
				tabs: [
					{
						id: "tab0",
						typeName: "充值",
						orderBy: "productId",
						sort: "desc",
						page: 1,
						params: {
							"productTypeId": "VISUAL_WEALTH"
						}
					},{
						id: "tab1",
						typeName: "购买VIP",
						orderBy: "productId",
						sort: "desc",
						page: 1,
						params: {
							"productTypeId": "VIP_MONTH"
						}
					},
					{
						id: "tab1",
						typeName: "小纸条",
						orderBy: "productId",
						sort: "desc",
						page: 1,
						params: {
							"productTypeId": "MESSAGE_COUNT"
						}
					},
				],
				// 				vips: [
				// 					
				// 				],
				// 				chargeValues: [
				// 					
				// 				],
				products: [{
					contentText: {
						contentdown: "上拉显示更多",
						contentrefresh: "正在加载...",
						contentnomore: "没有更多数据了",
					},
					loadingType: 0,
					data: []
				}, {
					contentText: {
						contentdown: "上拉显示更多",
						contentrefresh: "正在加载...",
						contentnomore: "没有更多数据了",
					},
					loadingType: 0,
					data: []
				},{
					contentText: {
						contentdown: "上拉显示更多",
						contentrefresh: "正在加载...",
						contentnomore: "没有更多数据了",
					},
					loadingType: 0,
					data: []
				}],
				showState: {
					vip: false,
					recharge: false
				},
				activePop: "",
				showMask: false,
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				

			}
		},
		onLoad() {
			this.getMore(0);
			this.getMore(1);
			this.getMore(2);
		},
		onUnload: function() {
			this.showState[this.activePop] = false;
		},
		computed: {
			...mapGetters(
				["hasLogin"],
			),
			...mapState({
				userInfo: state => state.user.userInfo
			}),
		},
		methods: {
			// 			show(evt) {
			// 				var pos = evt.mp.currentTarget.dataset.position;
			// 				console.log(pos)
			// 				this.activePop = pos;
			// 				this.showMask = true
			// 				this.showState[pos] = true
			// 			},
			// 			hide: function() {
			// 				this.showMask = false
			// 				this.showState[this.activePop] = false
			// 			},
			getMore(index) {
				getPage(this.getParams(this.tabs[index].params, this.tabs[index].page,
						10, this.tabs[index].orderBy, this.tabs[index].sort))
					.then(response => {
						console.log(JSON.stringify(response));
						if (response.status == 200 && response.data.length > 0) {

							for (var i = 0; i < response.data.length; i++) {

								this.products[index].data.push(response.data[i]);
							}
							this.tabs[index].page = this.tabs[index].page + 1;
							this.products[index].loadingType = 0;

						} else {
							this.products[index].loadingType = 2;
						}

					})
			},
			getParams: function(p, page, pageSize, orderBy, sort) {
				let params = p || {};
				params.page = page;
				params.limit = pageSize;
				params.orderBy = orderBy;
				params.sort = sort;
				console.log("getParams:"+params);

				return params
			},
			// 			getRecharge(productTypeId) {
			// 				getPage({"productTypeId": productTypeId, page: 1, limit: 100, "sort": "asc", orderBy: "productId"})
			// 				.then(response => {
			// 					console.log(JSON.stringify(response));
			// 					if(response.status == 200 && response.data.length > 0) {
			// 						this.chargeValues = response.data
			// 					}
			// 				})
			// 			},
			bindChange: async function(e) {
				let index = e.target.current;
				if (this.isClickChange) {
					this.currentTab = index;
					this.isClickChange = false;
					return;
				}
				let tabBar = await this.getWidth("tab-bar"),
					tabBarScrollLeft = tabBar.scrollLeft;

				let width = 0;

				for (let i = 0; i < index; i++) {
					let result = await this.getWidth(this.tabs[i].id);
					width += result.width;
				}


				let winWidth = uni.getSystemInfoSync().windowWidth,
					nowElement = await this.getWidth(this.tabs[index].id),
					nowWidth = nowElement.width;

				if (width + nowWidth - tabBarScrollLeft > winWidth) {
					this.scrollLeft = width + nowWidth - winWidth;
				}
				if (width < tabBarScrollLeft) {
					this.scrollLeft = width;
				}
				this.isClickChange = false;
				this.currentTab = index; //一旦访问data就会出问题
			},
			getWidth: function(id) { //得到元素的宽高,

				return new Promise((res, rej) => {

					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						if (id === 'tab-bar') {
							console.log("id=", id, "数据:", data)
						}
						res(data);
					}).exec();
				})
			},
			swichNav: async function(e) { //点击tab-bar,

				if (this.currentTab === e.target.dataset.current) {
					console.log(false);

					return false;
				} else {

					let tabBar = await this.getWidth("tab-bar"),
						tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft

					console.log(tabBarScrollLeft);
					this.scrollLeft = tabBarScrollLeft;
					this.isClickChange = true;
					this.currentTab = e.target.dataset.current
				}
			},
			loadMore: function(index) {
				if (this.products[index].loadingType !== 0) {
					return;
				}
				this.products[index].loadingType = 1;
				this.getMore(index)
			},
			buy(item) {
				this.showMask = false
				this.showState[this.activePop] = false
				var orderHeader = {
					cartId: new Date().getTime(),
					orderTypeId: 'SERVICE_ORDER_VIP',
					statusId: 'ORDER_CREATED',
					//#ifdef APP-PLUS
					terminalId: plus.os.name,
					visitId: appInfo.deviceId,
					//#endif
					productStoreId: item.productStoreId,
					grandTotal: item.productPrices[0].price,
					productFeatureApplId: "",
					orderName: item.productName,
					productFeatureDescription: "",
					transactionMessage: "",
					orderItems: [{
							orderItemSeqId: 1,
							orderItemTypeId: 'PRODUCT_ORDER_ITEM',
							isItemGroupPrimary: "Y",
							productId: item.productId,
							productName: item.productName,
							productFeatureApplId: "",
							productFeatureApplDesc: "",
							originalImageUrl: item.originalImageUrl,
							attachProps: "",
							quantity: 1,
							cancelQuantity: 0,
							selectedAmount: item.quantityIncluded,
							unitListPrice: item.productPrices[0].price,
							statusId: 'ORDER_CREATED',
							otherCode: item.otherCode == undefined ? "" : item.otherCode
						}

					],

				}
				setStore({
					name: '$sc_temp_order',
					content: orderHeader,
					type: 'session'
				})

				uni.navigateTo({
					url: "/pages/buy/checkout?typeId=" + 1
				})
			},
			buyMessageCount(item) {
				
			},
			goTo(index, page) {
				uni.navigateTo({
					url: page+"?typeId="+index
				})
			}
		}
	}
</script>

<style>
	.index {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		width: 750upx;
		height: 100%;
	}

	.bottom-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
		width: 750upx;
		height: 100upx;
		display: flex;
		background: #fff;
	}

	.bottom-btn .pl {
		float: left;
		height: 100upx;
		line-height: 96upx;
		width: 50%;
		border: 1px solid #b4282d;
		background: #b4282d;

		flex: 1;
		text-align: center;
		color: #fff;
	}

	.bottom-btn .pr {
		border: 1px solid #f1c40f;
		background: #f1c40f;
		float: left;
		height: 100upx;
		line-height: 96upx;
		flex: 1;
		text-align: center;
		color: #fff;
	}

	.m-menu {
		display: flex;
		margin-top: 40upx;
		height: 181upx;
		width: 750upx;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}

	.m-menu .item {

		flex: 1;
		display: block;
		padding: 20upx 0;
	}

	.m-menu image {
		display: block;
		width: 58upx;
		height: 58upx;
		margin: 0 auto;
		margin-bottom: 12upx;
	}

	.m-menu text {
		display: block;
		font-size: 24upx;
		text-align: center;
		margin: 0 auto;
		line-height: 1;
		color: #333;
	}

	/* 
		.mask {
				position: fixed;
				width: 750upx;
				z-index: 998;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: rgba(0, 0, 0, .3);
			}
		
		
			.popup {
				position: absolute;
				z-index: 999;
				background-color: #ffffff;
				-webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
				box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
			}
		
		
			.popup-bottom {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 1000upx;
				text-align: center;
			}
			
			 */

	.index-bd {
		width: 750upx;
		height: 100%;
	}


	.swiper-tab {
		margin-top: 128upx;
		width: 100%;
		white-space: nowrap;
		line-height: 64upx;
		height: 64upx;
	}


	.swiper-tab-list {
		font-size: 30upx;
		width: 250upx;
		display: inline-block;
		text-align: center;
		color: #777777;
		color: #FF0000;
		
	}

	.on {
		color: #FF0000;
		border-bottom: 5px solid #FF0000;
	}

	.swiper-box {
		flex: 1;
		width: 100%;
		height: 100%;
	}
</style>
